/**
 @mouseenter="enter($event)" @mouseleave="leave($event)" --- 鼠标进入div块或者移出时调用的方法，这两个方法生命只能应用于div块
 event.target --- 获取当前点击停留标签对象，不一定是方法声明的标签
 event.target.style.cursor = "pointer"; 设置光标为手掌样式
 */
<template>
  <div id="searchList">
    <el-container>
      <el-aside width="200px" class="title">
        <strong>{{data.title}}</strong>
      </el-aside>
      <el-main style="padding:10px">
        <el-col class="col" :span="4" v-for="(item,index) in data.list" :key="index">
          <div
            @mouseenter="enter($event)"
            @mouseleave="leave($event)"
            @click="click(item.id)"
          >{{item[data.prop]}}</div>
        </el-col>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    enter: function (event) {
      event.target.style.cursor = "pointer";
      event.target.style.color = "red";
    },
    leave: function (event) {
      event.target.style.color = "blue";
    },
    click(val) {
      var pro = this.data.prop;
      this.$parent.searchList(pro,val);
    },
  },
};
</script>

<style>
.title {
  background: #f3f3f3;
}
#searchList {
  border-top: 1px solid rgb(175, 172, 172);
  border-bottom: 1px solid rgb(231, 231, 231);
  font-size: 12px;
}
</style>